<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Assan help file</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <link href="css/style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
              <header class="navbar navbar-static-top navbar-default" id="top" role="banner">
            <div class="container">
                <div class="navbar-header">
                    <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="https://wrapbootstrap.com/theme/assan-clean-multipurpose-template-WB05F069P" class="navbar-brand">Assan 1.7.5</a>
                </div>
                <nav class="collapse navbar-collapse bs-navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="index.html">Basics</a>
                        </li>
                        <li>
                            <a href="install.html">Install</a>
                        </li>
                        <li>
                            <a href="css.html">CSS</a>
                        </li>                       
                        <li>
                            <a href="contact.html">Contact forms</a>
                        </li>
                        <li>
                            <a href="change-log.html">Change Log</a>
                        </li>
                    </ul>
               
                </nav>
            </div>
        </header>
        <div class="banner" style="background-color: #f5f5f5;padding-bottom: 20px;">
            <div class="container">
                <h1>Sass to Css </h1>
                <p>
                    If you trying to edit into style, one-page .scss files and changes are not apply.you need some setup for apply changes. If you have any questions that are beyond the scope of this help file, please feel free to <a href="https://wrapbootstrap.com/user/design_mylife" target="_blank">Contact me</a> Thanks so much!
                </p>
            </div>
        </div>

        <div class="page-content" style="margin-top:50px;">
            <div class="container">
                <h4 style="margin-bottom: 30px;">We are using very easy to understand and compiles ruby, compass, and sass by command lines.</h4>
                <ul class="list">
                    <li>
                        <span class="color">1-</span> Download and Install Ruby from here:- <a href="http://rubyonrails.org/download/">http://rubyonrails.org/download/</a>
                    </li>
                    <li>
                        <span class="color">2-</span> After complete installation > open assan html folder > hold Shift + right click
                    </li>
                    <li>
                        <span class="color">3-</span> type this command line - gem install sass
                    </li>
                    <li>
                    <span class="color">4-</span> then type this - gem install compass
                    </li>
                    <li>
                       <span class="color">5-</span> then type this - compass watch
                    </li>
                    <li>
                        Now the compass is watching changes for your .scss file, when you make changes into the .scss file, the compass compile them into .css file
                    </li>
                    <li>
                        Recommended editor - Netbeans IDE 8.01 (easy to use and compile files)
                    </li>
                </ul>
                <br><br>
                
                <h3>Scss files includes </h3>
                <p>All .scss files into the scss folder of assan template.</p>
                <p>style.scss - for main template</p>
                <p>one-page.scss - for one page light version</p>
                <p>one-page-dark.scss - for one page dark version</p>
                <p>_mixins.scss - for sass mixins like transitions, border-radius, box-shadow, tansform etc.</p>
                <p>_variables.scss - for variables like colors fonts etc.</p>
                <br>
                <h4>How to change color skin with one change</h4>
                <p>Open <span class="color">variables.scss</span> file</p>
                <p>go to this line -<span class="color">$skincolor - put your color code here</span></p>
                <br>
                <h4>Slider Revolution customizable css  </h4>
                <p>Slider Revolution (for change style of slider revolution text, colors etc.) - <span class="color">css/rev-style.css</span></p>
                <p></p>
            </div>
        </div>

        <div class="container text-center" style="margin-top: 100px;padding: 20px;">&copy; 2015.Assan 1.7.1, Design_mylife</div>

        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
    </body>
</html>
